d<!DOCTYPE html>
<!--//声明该页面时thymeleaf模板-->
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title></title>
    <link rel="stylesheet" href=".././layui/css/layui.css" th:href="@{.././layui/css/layui.css}"/>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" src=".././layui/layui.js" th:src="@{.././layui/layui.js}"></script>
<script type="text/javascript">
    // 点击按钮播放视频
    function fun(path) {
        //需要一个页面播放视频
        //需要一个视频标签
        var loadstr = '<video width="100%" height="100%"  ' +
            'controls="controls"' +
            'autoplay="autoplay">' +
            '<source src="../' + path +
            '"' +
            ' type="video/mp4"></source></video>'
        //需要一个弹出框
        layui.use(["layer"], function () {
            var layer = layui.layer;
            layer.open({
                    type: 1,
                    title: "预览",
                    area: ["50%", "50%"],
                    content: loadstr
                }
            );
        })
    }

    layui.use(
        [
            "laydate",
            "laypage",
            "layer",
            "table",
            "carousel",
            "upload",
            "element",
            "slider"
        ],
        function () {
            var laydate = layui.laydate, //日期
                laypage = layui.laypage, //分页
                layer = layui.layer, //弹层
                table = layui.table, //表格
                carousel = layui.carousel, //轮播
                upload = layui.upload, //上传
                element = layui.element, //元素操作
                slider = layui.slider, //滑块
                $ = layui.jquery;



            table.render({
                elem: "#demo",
                height: 600,
                url: "http://localhost:7070/video/videos/getAll", //数据接口
                title: "用户表",
                page: true, //开启分页
                toolbar: "default", //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

                parseData: function (res) {
                    //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.item //解析数据列表
                    };
                },
                cols: [
                    [
                        //表头
                        {type: "checkbox", fixed: "left"},
                        {
                            field: "id",
                            title: "ID",
                            fixed: "left"
                        },
                        {field: "author", title: "作者"},
                        {
                            field: "des",
                            title: "描述"
                        },
                        {
                            field: "videoUrl",
                            title: "视频内容",
                            templet(dt) {
                                var path = dt.videoUrl;
                                return "<button class='layui-btn layui-btn-normal layui-btn-xs vi'" +
                                    "onclick='fun(\"" + path + "\")'>点击我播放</button>"
                                //虽然path本身是一个字符串，但是拼接字符串规定也要加双引号给路径，否则读取不到
                            }

                        },
                        {
                            field: "src",
                            title: "封面",
                            templet: function (dt) {
                                var s = dt.src;
                                var img = "<img src='../bgm/" + s +
                                    "' style='height: 150px;width: 150px;'/>"
                                console.log(s)
                                return img;

                            }
                        },
                        {field: "time", title: "时长"},
                        {field: "star", title: "点赞"},
                        {field: "createtime", title: "创建时间"},
                        {
                            fixed: "right",
                            width: 165,
                            align: "center",
                            toolbar: "#barDemo"
                        }
                    ]
                ]
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var d = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                       //向服务端发送删除指令
                        $. ajax({
                            type:"post",
                            url:"http://localhost:7070/video/videos/del",
                            data:{
                                "id":d.id ,
                            },
                            dataType:"json",
                            success(res){
                                //解析json数据，判断结果
                                if (res.message=="success"){

                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.msg(res.message);
                                }else {
                                    layer.msg(res.message);
                                }

                            }
                        })
                    });
                }
            });
        });

</script>
</body>
</html>
